<template>
  <a-space>
    <a-select
      ref="select"
      v-model:value="value1"
      style="width: 120px"
      @focus="focus"
      @change="handleChange"
    >
      <a-select-option value="jack">Jack</a-select-option>
      <a-select-option value="lucy">Lucy</a-select-option>
      <a-select-option value="disabled" disabled>Disabled</a-select-option>
      <a-select-option value="Yiminghe">yiminghe</a-select-option>
    </a-select>
    <a-select v-model:value="value2" style="width: 120px" disabled>
      <a-select-option value="lucy">Lucy</a-select-option>
    </a-select>
    <a-select v-model:value="value3" style="width: 120px" loading>
      <a-select-option value="lucy">Lucy</a-select-option>
    </a-select>
  </a-space>
  <!-- <h2 style="margin-top: 10px">use options (recommend)</h2> -->
  <a-space>
    <a-select
      ref="select"
      v-model:value="value1"
      style="width: 120px"
      :options="options1"
      @focus="focus"
      @change="handleChange"
    ></a-select>
    <a-select
      v-model:value="value2"
      style="width: 120px"
      disabled
      :options="options2"
    ></a-select>
    <a-select
      v-model:value="value3"
      style="width: 120px"
      loading
      :options="options3"
    ></a-select>
  </a-space>

  <a-space :style="{ marginTop: '20px' }">
    <a-button type="primary" @click="getHappy">Primary Button</a-button>
    <a-button @click="changeHappy('I am better')">Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
    <a-button type="link" @click="refClick">Link Button</a-button>
  </a-space>
  <br />
  <a-space>
    <!-- <a-bove></a-bove> -->
    <About @changeBetter="changeBetter">
      <template v-slot:aaa="{ data }">
        <ul>
          <li>{{ data.message }}</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </template>
      <template v-slot:bbb="{ data }">
        <ul>
          <li>{{ data.message }}</li>
          <li>222</li>
          <li>333</li>
        </ul>
      </template>
    </About>
  </a-space>
  <br />
  <a-space>
    {{ happy }}
  </a-space>
  <br />
  <br />
  <br />
  <a-space>
    <Hello ref="helloRef" :titles="helloWorld"></Hello>
  </a-space>
  <br>
  <br>
  <br>
  <div><button ref="refButton" @click="alertTitle">refButton----</button></div>
</template>

<script setup lang="ts">
import type { SelectProps } from "ant-design-vue";
import {
  computed,
  provide,
  ref,
  onMounted,
  nextTick
} from "vue";

import { useHomeStore } from "@/store/modules/home";
import About from "@/pages/AboutView.vue";
import Hello from "@/components/HelloWorld.vue";


const alertTitle = () => {
  refButton.value.innerHTML = "hello world";
  console.log('asdasd',refButton.value.innerHTML);
  nextTick(() => {
    console.log("我是小写的打印"); //这一句只会当按钮文字变为小写的时候打印
  });
  console.log("我应该在nextTick之前打印");
};

onMounted(() => {
  console.log("helloRef:", helloRef);
});

const helloRef = ref();
const refButton = ref();
const refClick = () => {
  helloRef.value.alertTitle();
};

const helloWorld = ref("Hello World");
const homeStore: any = useHomeStore();

const options1 = ref<SelectProps["options"]>([
  {
    value: "jack",
    label: "Jack",
  },
  {
    value: "lucy",
    label: "Lucy",
  },
  {
    value: "disabled",
    label: "Disabled",
    disabled: true,
  },
  {
    value: "yiminghe",
    label: "Yiminghe",
  },
]);
const options2 = ref<SelectProps["options"]>([
  {
    value: "lucy",
    label: "Lucy",
  },
]);
const options3 = ref<SelectProps["options"]>([
  {
    value: "lucy",
    label: "Lucy",
  },
]);
provide('aaa',options3)
const focus = () => {
  console.log("focus");
  console.log(homeStore);
  console.log(homeStore.happy);
};

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const happy = computed(() => homeStore.happy);
const getHappy = () => {
  console.log(happy);
  console.log(happy.value);
};

const changeHappy = (val: string) => {
  homeStore.changeHappy(val);
};

const changeBetter = (val: any) => {
  homeStore.changeHappy(val);
};

const value1 = ref("lucy");
const value2 = ref("lucy");
const value3 = ref("lucy");
</script>

<style lang="less"></style>
